<!--
 * @Description: 单选组件,useVmodel绑定值
 * @Author: Zhanghan
 * @Date: 2024-11-11 19:51:11
 * @LastEditTime: 2025-01-25 14:24:52
 * @LastEditors: Zhanghan
-->
<template>
  <div class="radio">
    <div
      v-for="item in option"
      :key="item?.value"
      :class="{ item_radio: true, active: item.value == checked }"
      @click="seletItem(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useVModel } from "@/utils/useVModel";
import { ref } from "vue";

defineOptions({ name: "ProRadiuSelectSecond" });


const props = defineProps<{
  option: { label: string; value: number }[];
  checked?: number | string;
}>();

const emit = defineEmits(["update:checked"]);

const checked = useVModel(props, "checked", emit);

const seletItem = (val: any) => {
  if (checked.value == val.value) {
    checked.value = undefined;
    return;
  }
  checked.value = val.value;
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
